/******** 嵌套表子表自动对齐单元格 ********/
    // (注意: 自定义展开事件包裹元素必须加入此属性值 "expand" 否则点击展开无法实现对齐单元格)
let dragendListener
export default (Vue) => {
    return Vue.directive('nestedTable', {
        bind(el, binding, vnode) {

            // 获取el-table的vue实例
            let vm = vnode.componentInstance

            // 计算表格td宽度
            let $$dragend = function() {
                window.resizeTimeout = null
                clearTimeout(window.resizeTimeout)
                window.resizeTimeout = setTimeout(() => {

                    // 主表单元格
                    let mainThs = $(el).find('.el-table__header-wrapper').find('colgroup')[0]

                    // 子表单元格
                    let subWrapper = $(el).find('.el-table__expanded-cell').find('.el-table__body-wrapper').find('colgroup')[0]

                    if (subWrapper) {
                        mainThs.childNodes.forEach((v, i) => {
                            if (subWrapper.childNodes[i]) {
                                subWrapper.childNodes[i].width = v.width
                            }
                        })
                    }
                }, 200)
            }

            // 打开vm.log
            vm.debug = false

            // 表头绑定拖拽监听, 若el-table设置了@header-dragend事件则不绑定
            if (!vm.$listeners['header-dragend']) {
                let $head = el.querySelector('thead')
                let outArea = true
                let mDown = false
                // 鼠标抬起
                let dragUp = () => {
                    vm.log('MOUSEUP')
                    mDown = false
                    $$dragend()
                    vm.log('outArea', outArea)
                    if (outArea) {
                        vm.log('鼠标抬起: 清除鼠标事件')
                        window.removeEventListener('mouseup', dragUp, false)
                        window.removeEventListener('mousedown', dragDown, false)
                    }
                }
                // 鼠标到处拖动
                let dragDown = () => {
                    mDown = true
                    outArea = false
                    vm.log('MOUSEDOWN:', 'mDown:', mDown, 'outArea:', outArea)
                }

                // 进入表头区域
                $head.addEventListener('mouseenter', () => {
                    vm.log('MOUSEENTER')
                    outArea = false
                    // 绑定鼠标事件
                    window.addEventListener('mouseup', dragUp, false)
                    window.addEventListener('mousedown', dragDown, false)
                })
                // 退出表头区域
                $head.addEventListener('mouseleave', () => {
                    vm.log('MOUSELEAVE')
                    vm.log('mDown:', mDown)
                    outArea = true
                    if (!mDown) {
                        vm.log('清除鼠标事件')
                        window.removeEventListener('mouseup', dragUp, false)
                        window.removeEventListener('mousedown', dragDown, false)
                    }
                })
            }

            // 当视窗变化时重绘td宽度
            dragendListener = () => {$$dragend()}
            window.addEventListener('resize', dragendListener, false)

            // 当数据加载完成后执行扩展方法
            let unwatch = vm.$watch('data', function(newVal, oldVal) {

                // 关闭监听
                unwatch()

                //初始化对齐
                $$dragend()

                // 监听嵌套表的dom变化
                window.m_b_nestedTable = new MutationObserver(function(mutationRecord, observer) {
                    // vm.log(mutationRecord, observer)
                    // vm.log(mutationRecord[0].addedNodes.length)
                    // 展开时候执行
                    if (mutationRecord[0].addedNodes.length > 0) {
                        $$dragend()
                    }
                })
                window.m_b_nestedTable.observe(
                    el.querySelector('.el-table__body-wrapper > table > tbody'), {
                        childList: true //监听节点DOM变化
                    })
            }, {
                deep: true
                // immediate: true
            })
        },
        unbind() {
            // 解绑计算表格事件
            window.removeEventListener('resize', dragendListener, false)
            window.resizeTimeout = null

            // 解绑监听
            window.m_b_nestedTable.disconnect()
        }
    })
}
